<template>
  <div class="flashsale-swiper">
    <div class="swiper-container flash-sale-swiper">　　　　　　
      <div class="swiper-wrapper">
        <div class="swiper-slide" :key="index" v-for="(item,index) of swiperList">
          <div class="item" >
            <div class="cover">
              <img :src="item.coverUrl" alt="">
            </div>
            <div class="title">{{item.title}}</div>
            <div class="desc">{{item.desc}}</div>
            <div class="price">
              <span>{{item.price.now}}元</span>
              <del>{{item.price.before}}元</del>
            </div>
          </div>
        </div>
        　　　　　　
      </div>

    </div>
    <div class="swiper-controls">
      <div class="prev">
        <i class="iconfont icon-tubiaozhizuo-"></i>
      </div>
      <div class="next">
        <i class="iconfont icon-tubiaozhizuo-1"></i>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import $ from 'jquery';
export default {
  name: "HomeMainFlashsaleSwiper",
  data(){
    return{
      swiperList:[
        {
          coverUrl:'//cdn.cnbj1.fds.api.mi-img.com/mi-mall/4ed69fa94de1edd4e3d5996d14751f3e.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:'米家智能空气炸锅3.5 L 白色',
          desc:'无油低脂，健康烹饪新选择',
          price:{
            now:349,
            before:399
          }
        },
        {
          coverUrl:'//cdn.cnbj1.fds.api.mi-img.com/mi-mall/23cf2a6a6175656aafa3ca17422f94c2.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:'小米手环 5 黑色',
          desc:' 磁吸式充电',
          price:{
            now:169,
            before:189
          }
        },
        {
          coverUrl:'//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9d4ee2fc25e93ef8630dd33dc5e461f3.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:'米家博朗电动剃须刀 黑色',
          desc:'小身材，大动力',
          price:{
            now:229,
            before:249
          }
        },
        {
          coverUrl:'//cdn.cnbj1.fds.api.mi-img.com/mi-mall/739bfb64385b7c4b5985069086a03b20.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:'米家定制T恤 黑色 XL',
          desc:'米家定制T恤',
          price:{
            now:129,
            before:149
          }
        },
        {
          coverUrl:'//cdn.cnbj1.fds.api.mi-img.com/mi-mall/c36fb08259a3afdfb341330a90dda905.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:'米家声波电动牙刷T500 蓝色',
          desc:'刷的干净、智能护齿',
          price:{
            now:179,
            before:199
          }
        }, {
          coverUrl:'//cdn.cnbj1.fds.api.mi-img.com/mi-mall/61d7ca143f6f524808421d85fb9e6f19.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:'米家防蓝光眼镜钛轻盈 黑色',
          desc:'超轻超透，防蓝光护眼',
          price:{
            now:189,
            before:199
          }
        },
        {
          coverUrl:'//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ddfa684494cc737217961b3d50b49716.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:'变形金刚 擎天柱 ',
          desc:'正版授权，经典造型高度还原',
          price:{
            now:299,
            before:399
          }
        },
        {
          coverUrl:'//cdn.cnbj1.fds.api.mi-img.com/mi-mall/92a5486f9501daba1ee3beaeefee709e.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:'贝医生儿童声波电动牙刷（智能故事版） 蓝色',
          desc:'会讲故事的电动牙刷',
          price:{
            now:199,
            before:299
          }
        },
        {
          coverUrl:'//cdn.cnbj1.fds.api.mi-img.com/mi-mall/16f33709f83b7e937953fbc8969468c8.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:'米家运动心电T恤 M 深花灰',
          desc:'米家运动心电T恤',
          price:{
            now:249,
            before:299
          }
        },
        {
          coverUrl:'//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ba485f3f5e5e5e7ff2670afae1c648a7.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:'千年榫营造积木 祈年殿 白色',
          desc:'千年榫营造积木 祈年殿',
          price:{
            now:799,
            before:999
          }
        },
        {
          coverUrl:'//cdn.cnbj1.fds.api.mi-img.com/mi-mall/df09e671589d011136d80cd8a29ad5f5.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:'FIVE智能刀筷砧板杀菌架 白色',
          desc:'智能刀筷砧板杀菌架',
          price:{
            now:279,
            before:329
          }
        },
        {
          coverUrl:'//cdn.cnbj1.fds.api.mi-img.com/mi-mall/407c64424a6d7784db274b551ef5c950.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:'Circle Joy圆乐 电动红酒开瓶器4合1礼盒套装 常规版',
          desc:'304不锈钢，精工细作，送礼佳品',
          price:{
            now:158,
            before:198
          }
        }
      ]
    }
  },
  mounted() {
    new Swiper('.flash-sale-swiper', {
      autoplay: true,//可选选项，自动滑动
      slidesPerView: 4,
      slidesPerGroup:4,
      delay:3000,
      speed:1000,
      spaceBetween : 14,
      observer:true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents:true,//修改swiper的父元素时，自动初始化swiper
      navigation:{
        prevEl:'.prev',
        nextEl:'.next'
      },
      on:{
        reachEnd: function(e){
          $('.swiper-controls>.next>i').css('color','#E0E0E0')
          $('.swiper-controls>.prev>i').css('color','#9a9a9a')
        },
        reachBeginning: function(){
          $('.swiper-controls>.next>i').css('color','#9a9a9a')
          $('.swiper-controls>.prev>i').css('color','#E0E0E0')

        },

      },
    })
  }
}
</script>

<style scoped lang="scss">
.flashsale-swiper {
  width: 978px;
  height: 100%;

  .flash-sale-swiper{
    transition-timing-function:ease;
    width: 100%;
    height: 100%;
    .swiper-slide{
      width: 234px;
      height: 100%;
      background-color: #FAFAFA;
     &:nth-child(even){
       border-top: 1px solid #00C0A5;
     }
      &:nth-child(odd){
        border-top: 1px solid #FFAC13;
      }
      .item{
        display: flex;
        flex-direction: column;
        padding-top: 39px;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
        .cover{
          width: 160px;
          height: 160px;
          margin-bottom: 22px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .title{
          width: 100%;
          font-size: 14px;
          color: #333333;
          margin-bottom: 3px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          text-align: center;
        }
        .desc{
          font-size: 12px;
          color: rgb(176,176,176);
          margin-bottom: 12px;
        }
        .price{
          font-size: 14px;
          span{
            color: rgb(255,103,9);
            margin-right: 5px;
          }
          del{
            color: rgb(176,176,176);
          }
        }
      }
    }
  }
  .swiper-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 70px;
    height: 25px;
    border: 1px solid #E0E0E0;
    position: absolute;
    top: 25px;
    right: 0;
    > div {
      display: flex;
      width: 50%;
      align-items: center;
      justify-content: center;
      height: 100%;
      position: relative;
      &:hover{
        i{
          color: #FF6700;
          transition: color 0.5s;
        }
      }
      i{
        color: #9a9a9a;
        transition: color 0.5s;
      }
      &:first-child {
        &:after {
          content: '';
          position: absolute;
          right: 0;
          height: 100%;
          width: 1px;
          background: #e0e0e0;
        }
      }
    }
  }
}
</style>